<template>
  <article :class="[{'page':useType=='quyu' || useType=='huodong'}]" style="overflow-y: hidden;">
    <div v-if="useType=='quyu'" class="area">
      <div class="location">
        <div class="inner">
          <img
            src="../../../../../static/images/dangjian/home/location.png"
            alt=""
          />
        </div>
        <span class="name">{{regionalInfo.name}}</span>
        <span class="name-min" v-if="dgwTotal>0" >&nbsp;共有{{dgwTotal}}个视频</span>
      </div>
      <div class="btn" @click="goRegional">
        <span class="qh">切换</span>
        <span class="arrow"></span>
      </div>
    </div>
    <!-- 列表 -->
    <section class="videos-list">
      <cube-scroll
        ref="scroll"
        :scrollEvents="['scroll-end']"
        :options="options"
        @pulling-up="onPullingUp"
        @pulling-down="onPullingDown"
        @scroll-end="scrollEnd"
        style="width: 100%;"
      >
        <div class="clearfix">
          <fetchData :loading="isLoading" :data="list"></fetchData>
          <div
            class="video-item"
            v-for="(data, index) in list"
            :key="index"
            @click="playVideo(data,index)"
          >
            <div class="img">
              <span class="recommend-flag" v-show="useType == 'quyu' && data.checkOpinion">推荐</span>
              <img
                v-if="data.listPic && data.listPic !== ''"
                :src="tools.getImgUrl(data.listPic, true)"
                alt=""
              />
            </div>
            <h1 class="title">{{ data.title }}</h1>
            <div class="like">
              <isLikedComponent :newsId="data.id"></isLikedComponent>
              <!--              <div class="icon-like">-->
<!--                <img src="../../../../../static/images/dangjian/video/icon-like.png" alt="">-->
<!--              </div>-->
              <likedCountComponent :newsId="data.id"></likedCountComponent>
            </div>
            <div class="avatar">
              <img :src="getAvatarImg(data)" alt="">
            </div>
          </div>
        </div>
        <waterLogo :content="content" v-if="!isLoading && list.length === 0"></waterLogo>
        <onBottom v-else-if="onBottom"></onBottom>
      </cube-scroll>
    </section>
  </article>
</template>

<script>
import tools from "@/utils/tools";
import $ from "../../../../../static/js/jquery-1.12.4.min";
import isLikedComponent from "../../../common/isLikedComponent";
import likedCountComponent from "../../../common/likedCountComponent";

export default {
  components: {isLikedComponent, likedCountComponent},
  props: ['keyNew', 'useType', 'keyword', 'menuId'],
  data() {
    return {
      regionalInfo: {
        code: "",
        id: "",
        isShow: null,
        name: "",
        sortNum: "",
      }, //地区信息
      isLoading: true,
      onBottom: false, // W onBottom
      list: [],
      pageIndex: 1,
      pageSize: 6,
      y: "",
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      location: null,
      regionalList: [],
      userInfo:'',
      content:'暂无视频作品',
      dgwTotal: 0,
    };
  },
  created() {
    this.userInfo = this.$store.state.userInfo
    this.$nextTick(()=>{
      this.options.pullUpLoad = true;
      if (this.useType == 'huodong') { // 获取活动分页数据
        this.getList();
      }else { // 请求党工委、搜索分页数据
        if (this.$store.state.videoRegionalList) {
          this.regionalList = this.$store.state.videoRegionalList;
          this.matchingRegional();
        }else{
          this.getRegionalList();
        }
      }
    })
  },
  mounted(){
  },
  activated() {
    this.$nextTick(()=>{
      this.options.pullUpLoad = true;
      if (this.$store.state.needRefreshPodcast) { //需要刷新数据
        if (this.useType == 'huodong') { // 获取活动分页数据
          this.getList();
        }else { // 请求党工委、搜索分页数据
          if (this.$store.state.videoRegionalList) {
            this.regionalList = this.$store.state.videoRegionalList;
            this.matchingRegional();
          }else{
            this.getRegionalList();
          }
        }
      }
    })
  },
  methods: {
    // 获取区域数据
    getRegionalList() {
      this.options.pullUpLoad = true;
      let data = {
      };
      this.fetchService.play_areaConfigQuery(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.tip(res.message || '获取党委会列表接口服务出错，请联系管理员')
        }
        this.regionalList = res.data;
        this.$store.state.videoRegionalList = res.data;
        this.matchingRegional();
      });
    },
    //匹配地区信息并请求
    matchingRegional(){
      this.options.pullUpLoad = true;
      this.pageIndex= 1;
      //获取当前定位,并匹配
      this.regionalInfo = this.$store.state.regionalInfo || {
        code: this.userInfo.dgwGroupId === '999026' || '' || null ? 'other':this.userInfo.dgwGroupId,
        id: "",
        isShow: null,
        name: this.userInfo.dgwGroupName === '红云办测试党委' || '' || null ? '其他':this.userInfo.dgwGroupName,
        sortNum: "",
      };
      this.getList();
    },
    // 跳转区域选择
    goRegional(){
      this.$router.push({path: "/podcastRegionalChoice"});
      this.$store.state.needRefreshPodcast = true; //返回需要刷新
    },
    // 通过新接口获取用户头像
    getAvatarImg (item) {
      console.log('this.tools.getAvatarUrl(item.createUser)',this.tools.getAvatarUrl(item.createUser));
      // debugger
      return this.tools.getAvatarUrl(item.createUser)
      /* if (!item.photoId) {
        return imgLogo
      }
      return this.tools.getImgUrl(item.photoId || (item.detail && item.detail.newsContent.photoId)) */
    },
    onPullingDown() {
      console.log("onPullingDown");
      this.options.pullUpLoad = true;
      this.pageIndex = 1;
      this.list = [];
      this.fetchList();
    },
    onPullingUp() {
      this.fetchList();
    },
    scrollEnd({ x, y }) {
      this.y = y;
      console.log("scrollEnd", this.y);
    },
    playVideo(item, index) {
      if ($('#podcastSearchInput')) {
        $('#podcastSearchInput').blur();
      }
      var obj = {};
      if (this.useType == 'huodong') { // 获取活动分页数据
        obj = {
          fromType: 'hd', //活动
          menuId: this.menuId, //活动id
          pageIndex: this.pageIndex,
          list: this.list,
          index: index, //当前播放序号
        }
      }else { // 请求党工委、搜索分页数据
        obj = {
          fromType: this.useType=="quyu" ? 'dgw' : 'ss', //党工委
          regionalInfo: this.useType=="quyu" ? this.regionalInfo: null, //当前区域数据
          keyword: this.useType=="sousuo" ? this.keyword: '',
          pageIndex: this.pageIndex,
          list: this.list,
          index: index, //当前播放序号
        }
      }
      this.$store.state.currentPodcastData = obj;  //将目前数据传到弹窗组件
      // this.$createVideoSlidePlayer().show();
      this.$router.push({ path: "/videoSlidePlayerJump" });
      this.$store.state.needRefreshPodcast = false; //返回不需要刷新
      this.$store.state.nowKeepAlive = false; //KeepAlive
    },
    getList() {
      this.pageIndex = 1;
      this.list = [];
      this.fetchList();
    },
    fetchList() {
      if (this.useType == 'huodong') { // 获取活动分页数据
        this.play_getContentByActivity(this.menuId);
      }else { // 请求党工委、搜索分页数据
        this.contentPage();
      }
    },
    // 党工委、搜索调用
    contentPage() {
      this.isLoading = true;
      this.onBottom = false;
      let data = {
        channelId: "19a64c36d6ff4442948bb99bb1a06e77",
        areaCode: this.useType=="quyu" ? this.regionalInfo.code: '',
        title: this.useType=="sousuo" ? this.keyword: '',
        pageNo: this.pageIndex + "",
        pageSize: this.pageSize,
      };
      this.fetchService.contentPage(data).then((res) => {
        if (res.code !== 0) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.page.length < 1) {
          this.isLoading = false;
          this.options.pullUpLoad = false;
          this.onBottom = true;
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.dgwTotal = res.data.total
        this.pageIndex++;
        if (this.useType == 'quyu') { //党工委页面要加“推荐”标识
          const newList = res.data.page.map(async (item,index)=>{
            var params = {
              newsId: item.id
            }
            const {
              data
            } = await this.fetchService.play_queryRecommend(params)
            item.checkOpinion = data;
            return item;
          })
          Promise.all(newList).then((result) => {
              this.list = this.list.concat(result);
              setTimeout(() => {
                this.isLoading = false;
                this.$refs.scroll.forceUpdate &&
                  this.$refs.scroll.forceUpdate(true, false);
              }, 100);
          }).catch((error) => {
            console.log(error)
          })
        }else{
          this.list = this.list.concat(res.data.page);
          setTimeout(() => {
            this.isLoading = false;
            this.$refs.scroll.forceUpdate &&
              this.$refs.scroll.forceUpdate(true, false);
          }, 100);
        }
      });
    },
    // 获取活动内容分页数据
    play_getContentByActivity(id) {
      this.isLoading = true;
      this.onBottom = false;
      let data = {
        activityId: id,
        pageNo: this.pageIndex + "",
        pageSize: this.pageSize,
      };
      this.fetchService.play_getContentByActivity(data).then((res) => {
        if (res.code !== 0) {
          this.isLoading = false;
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.length < 1) {
          this.options.pullUpLoad = false;
          this.onBottom = true;
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.list = this.list.concat(res.data);
        this.isLoading = false;
        this.pageIndex++;
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
        }, 100);
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.clearfix:after {
  content: "."; /*内容为小点，尽量不要为空，防止旧版本丢弃*/
  display: block;
  height: 0;
  visibility: hidden; /*隐藏盒子*/
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.recommend-flag{
  padding: 0px 8px;
  border-radius: 4px;
  top: 10px;
  left: 10px;
  font-size: 12PX;
  background: #e20001;
  color: #fff;
  position: absolute;
  z-index: 888;
}

.area {
  height: pxToRem(58px);
  line-height: pxToRem(58px);
  // background: $theme-color;
  background: rgba($color: #fff, $alpha: 0.15);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin: 0 20px;
  padding: 0 10px;
  font-size: 14PX;
  .back {
    width: pxToRem(80px);
    height:100%;
    text-align: center;
  }
  .location {
    float: left;
    .inner {
      width: pxToRem(50px);
      position: relative;
      float: left;
      line-height: pxToRem(58px);
      vertical-align:middle;
      text-align:center;
      img{
        width: 40%;
        vertical-align:middle;
      }
    }
    .name{
      line-height: pxToRem(58px);
      width: pxToRem(300px);
    }
    .name-min{
      line-height: pxToRem(58px);
      width: pxToRem(300px);
      font-size: 13PX;
      color: #e2d1d1;
    }
  }
  .btn {
    float: right;
    width: pxToRem(100px);
    height:100%;
    text-align: left;
    position: relative;
    .qh {
      line-height: pxToRem(58px);
      width: pxToRem(300px);
    }
    .arrow {
      display:block;
      // float: right;
      position:absolute;
      top:50%;
      right: pxToRem(15px);
      width: pxToRem(24px);
      height: pxToRem(24px);
      border:2px solid #fff;
      border-width:2px 0 0 2px;
      transform:translate3d(0,-58%,0) rotate(135deg);
    }
  }
}


.videos-list {
  height: 95vh;
  display: flex;
  /* justify-content: flex-start;
  align-items: center; */
  flex-wrap: wrap;
  padding:pxToRem(20px);

  .inner {
    padding:pxToRem(20px);
  }
  .no-data {
    flex: 1;
  }
  .video-item {
    width: 49.2%;
    flex-shrink: 0;
    float: left;
    margin-bottom: pxToRem(12px);
    height: pxToRem(540px);
    // height: 540px;
    margin-left: 1.6%;
    border-radius: 10px;
    border: 1px solid #666;
    overflow: hidden;
    position: relative;
    &:nth-child(2n + 1) {
      margin-left: 0;
    }
    .img {
      background: #181824;
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-align: center;
      position: relative;
      img {
        position: absolute;
        //@include fullImg();
        width: 100%;
        height: auto;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }

    .title {
      width: 75%;
      position: absolute;
      color: #fff;
      font-size: 14PX;
      left: 20px;
      bottom: pxToRem(50px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .like {
      position: absolute;
      color: #fff;
      left: 20px;
      bottom: pxToRem(10px);
      font-size: 14PX;

      .icon-like{
        width: pxToRem(24px);
        display: inline-block;
        img{
          width: 100%;
          position: relative;
          top: 3px;
        }
      }
    }
    .avatar{
      width: pxToRem(50px);
      height: pxToRem(50px);
      border-radius: 50%;
      border: 2px solid #fff;
      overflow: hidden;
      position: absolute;
      color: #fff;
      background: #ddd;
      right: 20px;
      bottom: pxToRem(10px);
      font-size: 14PX;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
